<template>
  <div class="c-pb32">
    <header class="c-p c-flex-column poin-bg c-maxw640 c-bd-b20-f5">
      <div class="c-pb40">
        <div class="c-flex-row c-flex-center c-p c-pz9 c-pt44">
          <span class="c-pr10 c-fs56 c-fc-white c-fw-b c-flex-grow1 c-textAlign-c c-lh">{{myPoints}}<span class="c-fs20 c-pl10">{{pointNavName}}</span><i v-if="isAndroidApp" class="iconfont c-fc-white c-fs16 c-ph12" @click="showPointsDialog = true;">&#xe665;</i></span>
          <div v-if="companyAuth.enablePoints == 1 && companyAuth.enablePointMallModule == 1" @click="showTips" class="c-hh48 c-fc-white c-bg-xxlred integrate-mall c-flex-row c-flex-center c-fs18 c-pl12 c-pr10 c-pa c-p-t50 c-p-r0">
            <img class="c-hh28 c-ww28 c-mr10" src="@/assets/i/wap/points/icon_points.png" alt="">{{customPointName}}说明
          </div>
        </div>
        <div class="c-fs20 c-fc-white c-pt12 c-textAlign-c" v-if="Number(myPoints)>0 && rmb2Points>0">当前{{pointNavName}}价值约{{(myPoints / rmb2Points).toFixed(2)}}元</div>
      </div>
      <section v-if="!$isStore()" class="c-bg-white c-hh150 c-flex-row c-flex-center c-pv22 c-ww600 c-br-tl20 c-br-tr20 c-m-0auto">
        <div v-if="!$isWxApp()" @click="clickSign" class="c-flex-column c-flex-center c-flex-grow1 c-w0">
          <i class="iconfont icon-zhuanqujifen c-fs42 c-fc-xxlred"></i>
          <span class="c-fs20 c-pt12 c-textAlign-c">赚取{{companyAuth.integrateName1}}</span>
        </div>
        <div v-if="companyAuth.enablePoints == 1 && companyAuth.enablePointMallModule == 1" @click="clickMall" class="c-flex-column c-flex-center c-flex-grow1 c-w0">
          <i class="iconfont icon-jifenshangcheng c-fs46 c-fc-xxlred"></i>
          <span class="c-fs20 c-pt12 c-textAlign-c">{{customPointName}}商城</span>
        </div>
        <div @click="clickRank" class="c-flex-column c-flex-center c-flex-grow1 c-w0">
          <i class="iconfont icon-paihang1 c-fs42 c-fc-xxlred"></i>
          <span class="c-fs20 c-pt12 c-textAlign-c">{{companyAuth.integrateName1}}排行</span>
        </div>
      </section>
    </header>
    <section class="c-ph24">
      <div class="c-pv40 c-flex-row c-flex-center c-fs24 c-fc-sblack">
        <div @click="changeDateType(1)" class="c-ww100 c-hh60 c-flex-row c-flex-center bs-bb bd2-tbl-xxlred c-br-tl8 c-br-bl8" :class="timeType == 1 ? 'c-bg-xxlred c-fc-white' : ''">本周</div>
        <div @click="changeDateType(2)" class="c-ww100 c-hh60 c-flex-row c-flex-center bs-bb bd2-xxlred" :class="timeType == 2 ? 'c-bg-xxlred c-fc-white' : ''">本月</div>
        <div @click="changeDateType(3)" class="c-ww100 c-hh60 c-flex-row c-flex-center bs-bb bd2-tbr-xxlred c-br-tr8 c-br-br8" :class="timeType == 3 ? 'c-bg-xxlred c-fc-white' : ''">本年</div>
      </div>
      <div class="c-flex-row c-aligni-center">
        <div class="c-flex-grow1 c-w0 c-fs28 c-fw-b">{{customPointName}}明细</div>
        <div class="c-fs22 c-cursor-p c-pr40" :class="tabIndex == 0 ? '' : 'c-fc-gray'" @click="clickTab(0)">全部</div>
        <div class="c-fs22 c-cursor-p c-pr40" :class="tabIndex == -1 ? '' : 'c-fc-gray'" @click="clickTab(-1)">收入</div>
        <div class="c-fs22 c-cursor-p" :class="tabIndex == 1 ? '' : 'c-fc-gray'" @click="clickTab(1)">支出</div>
      </div>
    </section>

    <div v-for="(item,index) in dataInfo" v-bind:key="index" class="c-bd-b1 c-ph24 c-flex-row c-pv30 c-aligni-center">
      <div class="c-flex-grow1 c-aligni-center">
        <div class="c-flex-row c-aligni-center">
          <div class="c-fs28 c-mb16 c-fc-sxblack c-maxw520" v-if="item.src == 8 || item.src == 9">{{typeMapStr[item.src]}}{{companyAuth.integrateName1}}</div>
          <div class="c-fs28 c-mb16 c-fc-sxblack c-maxw520" v-else-if="item.src == 10 || item.src == 11">{{companyAuth.integrateName1}}{{typeMapStr[item.src]}}</div>
          <!-- 圈子 -->
          <div class="c-fs28 c-mb16 c-fc-sxblack c-maxw520" v-else-if="item.pTy==181">{{typeMapStr[item.src]}}{{item.isOut==1 ? '(取消)':''}}</div>
          <div class="c-fs28 c-mb16 c-fc-sxblack c-maxw520" v-else>{{typeMapStr[item.src]}}</div>
          <div class="c-fs18 iconfont c-fc-sxblack c-mb16 c-ml10" v-if="item.exp" @click="showExp(item)">&#xe61d;</div>
        </div>
        <div class="c-fs20 c-fc-gray">{{item.createdAt}}</div>
      </div>
      <div class="c-fs28 c-fc-xxlred" v-if="item.isOut==-1">
        +{{item.points}}
      </div>
      <div class="c-fs28" v-else>
        -{{item.points}}
      </div>
    </div>
    <loading-status-tem :noData="noneShow" :noMoreData="loadingStatus == 'NO_MORE_DATA' && !noneShow" :noDataText="'暂无相关记录'" :showLoading="isLoading"></loading-status-tem>

    <cj-popup v-model="showTipDialog" round>
      <div class="c-ww460 c-textAlign-c">
        <h2 class="c-fs28 c-pt48 c-pb40">{{customPointName}}有效期</h2>
        <p class="c-fs24 c-ph40 c-pb40 c-textAlign-l c-maxh360 c-contexty-auto" v-html="tipDialogContent"></p>
        <div @click="showTipDialog = false" class="c-fc-xxlred c-fs26 c-bd-t1 c-hh80 c-flex-row c-flex-center">我知道了</div>
      </div>
    </cj-popup>
    <cj-popup v-model="showPointsDialog" round>
      <div class="c-ww460 c-textAlign-c">
        <p class="c-fs24 c-ph40 c-pv40 c-textAlign-l c-maxh360 c-contexty-auto">{{customPointName}}可用于兑换课程商品或者支付时抵扣</p>
        <div @click="showPointsDialog = false" class="c-fc-xxlred c-fs26 c-bd-t1 c-hh80 c-flex-row c-flex-center">我知道了</div>
      </div>
    </cj-popup>
  </div>
</template>


<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js"
import { INTEGRAL_INCOME_TYPE_MAP } from "@/utils/constant.js"
let pageIndex = 1; //当前页面
export default {
  name: "IntegralDetail",
  components: {
    loadingStatusTem
  },
  props: [],
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"), // 积分的自定义
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      rmb2Points: localStorage.getItem("rmb2Points"),
      tabIndex: 0,
      pointNavName: '',
      noneShow: false,
      myPoints: 0,
      loadingStatus: "NO_MORE_DATA", //显示加载更多LOAD_MORE 加载中 LOADING 没有更多 NO_MORE_DATA
      integralList: [],
      dataInfo: [], // 展示的数据
      outIntegral: [], // 支出数据
      inIntegral: [], // 收入数据
      typeMapStr: Object.freeze(INTEGRAL_INCOME_TYPE_MAP),
      isLoading: false,
      showTipDialog: false,
      tipDialogContent: '',
      timeType: 1, // 选中的筛选时间类型 1 本周  2 本月  3 本年
      startDate: '',
      endDate: '',
      isAndroidApp: false,
      showPointsDialog: false
    };
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    showExp(option) {
      this.$cjConfirm({
          showCancelButton: false,
          message: option.exp,
      });
    },
    // 切换 周/月/年
    changeDateType(type) {
      if (this.timeType != type) {
        pageIndex = 1;
        this.dataInfo = [];
        this.timeType = type; // 1本周 2本月 3本年  默认1
        this.getIntegralDetail()
      }
    },
    // 点击积分说明
    showTips() {
      let type = this.companyAuth.overdueType;
      let content = "暂无" + this.customPointName + "说明";
      switch (type) {
        case 1:
          content = "长期有效";
          break;
        case 2:
          content = "自然年清零上一年获得的" + this.customPointName + "（每年1月1日清空上一年获得的" + this.customPointName + "）";
          break;
        case 3:
          content = "自然年清零所有" + this.customPointName + "（每年1月1日清空所有" + this.customPointName + "）";
          break;
        case 4:
          content = "每笔" + this.customPointName + "的有效期为" + this.companyAuth.pointExpireTime + "年";
          break;
      }
      this.tipDialogContent = content;
      this.showTipDialog = true;
    },
    //点击排行榜
    clickRank(e) {
      this.$routerGo(this, "push", { path: "/member/myIntegral/integralRank" });
    },
    //点击去签到
    clickSign(e) {
      this.$routerGo(this, "push", { path: "/member/myIntegral/integralIndex" });
    },
    //点击积分商城
    clickMall(e) {
      this.$routerGo(this, "push", { path: "/member/myIntegral/integralMall" });
    },
    getIntegralDetail() {
      //点击获取积分明细列表
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this
        // this.loadingStatus = 'LOADING';
        utilJs.getMethod(global.apiurl + 'members/pointList?page=' + pageIndex + '&status=' + this.tabIndex + '&timeType=' + this.timeType, function (res) {
          $this.myPoints = res.myPoints * 1;
          $this.pointNavName = res.pointNavName;
          setDocumentTitle(res.pointNavName);
          if (pageIndex == 1) { // 第一页
            $this.dataInfo = res.pointList.data ? res.pointList.data : [];
          } else { // 合并数据
            $this.dataInfo = [...$this.dataInfo, ...res.pointList.data];
          }
          if ($this.dataInfo.length == 0) {
            $this.noneShow = true;
          } else {
            $this.noneShow = false;
          }
          if (res.pointList.total == 0 || $this.dataInfo.length == res.pointList.total) {
            $this.loadingStatus = "NO_MORE_DATA";
          } else {
            $this.loadingStatus = 'LOAD_MORE';
            pageIndex++;
          }
          $this.isLoading = false;
        });
      }
    },
    clickTab(index) {
      // this.tabIndex = index;
      // pageIndex = 1
      // this.getIntegralDetail()
      if (this.tabIndex != index) {
        pageIndex = 1;
        this.dataInfo = [];
      }
      this.tabIndex = index;
      this.getIntegralDetail()
      // let mapType = {
      //   0: 0,
      //   1: -1,
      //   2: 1,
      // };
      let newUrl = `${window.location.href.split("#")[0]}#/member/myIntegral/integralDetail?tabIndex=${this.tabIndex}`;
      history.replaceState("homework", "", newUrl);
      // if(this.tabIndex == 0) {
      //   this.dataInfo = this.integralList
      // } else if(this.tabIndex == 1) {
      //   this.dataInfo = this.inIntegral
      // } else {
      //   this.dataInfo = this.outIntegral
      // }
      // if (this.dataInfo.length == 0) {
      //   this.noneShow = true;
      // } else {
      //   this.noneShow = false;
      // }
    },
    //分享
    wechatShare: function () {
      let title = `我的${this.companyAuth.integrateName1}`;
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#/member/myIntegral/integralDetail?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = `我的${this.companyAuth.integrateName1}`;
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#/member/myIntegral/integralDetail?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.loadingStatus == 'LOAD_MORE') {
          that.getIntegralDetail();
        }
      });
    },
  },
  activated() {
    setDocumentTitle('我的' + this.companyAuth.integrateName1);
    this.isLoading = false;
    this.showTipDialog = false;
    this.tipDialogContent = '';
    this.timeType = 1;
    this.startDate = '';
    this.endDate = '';
    this.isAndroidApp = utilJs.isAndroidApp();
    this.dataInfo = []
    pageIndex = 1
    this.getIntegralDetail();
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    this.loadingStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.height60-line {
  height: 1.5rem;
  width: 1px;
  background: #f2f2f2;
}
.integrate-mall {
  border-top-left-radius: 0.65rem;
  border-bottom-left-radius: 0.65rem;
}
.bs-bb {
  box-sizing: border-box;
}
.bd2-xxlred {
  border: 0.05rem solid #fe4f4b;
}
.bd2-tbl-xxlred {
  border-top: 0.05rem solid #fe4f4b;
  border-bottom: 0.05rem solid #fe4f4b;
  border-left: 0.05rem solid #fe4f4b;
}
.bd2-tbr-xxlred {
  border-top: 0.05rem solid #fe4f4b;
  border-bottom: 0.05rem solid #fe4f4b;
  border-right: 0.05rem solid #fe4f4b;
}
.poin-bg {
  background: url(../../../assets/i/wap/points/bg_my_points.png);
  background-size: 100%;
}
</style>
